<template>
    <div class="loginWrapper" id="loginBackground">
      <div class="formWrapper">
        <h1 class="loginTitle">{{ loginTitle }}</h1>
        <p class="loginSystem">{{ loginSystem }}</p>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          hide-required-asterisk
        >
          
          <el-form-item prop="userName">
            <el-input
              prefix-icon="el-icon-user"
              v-model="ruleForm.userName"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="ruleForm.password"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>
          <!-- <el-form-item class="forgetPassword">忘记密码</el-form-item> -->
          <el-form-item class="loginButtonWrapper">
            <el-button class="loginButton" type="primary"  @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
          <!-- <el-form-item style="text-align:left;">
            其他账号登录：
            <a href="/user/login/qq">
              <img :src="qqIcon" style="width: 30px;" />
            </a>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import { login } from '@/request/user.js'
  import { sendCaptcha } from '@/request/user.js'
  
  export default {
    name: 'Login',
    components: {  },
    data() {
      return {
        loginTitle: '登录',
        loginSystem: '欧拉云盘',
        ruleForm: {
          userName: '',
          password: '',
          email: '',
          captcha: '',
        },
        rules: {
          userName: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
          ]
        },
      }
    },
    computed: {
      
    },
    methods: {     
      //  登录按钮
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            //各项校验通过
            let data = {
              username: this.ruleForm.userName,
              password: this.ruleForm.password
            }
            login(data, true).then(res => {
              if (res.code == 200) {
                this.$refs[formName].resetFields();
                // this.$store.dispatch('getUserInfo').then(() => {
                //   this.$router.replace({ path: this.url })
                // })
                this.$message.success('登录成功')
                this.$store.dispatch('setUserInfo')
                setTimeout(() => this.$router.replace({name: 'File', query:{filepath: '/', filetype: 0}}), 1500)
                
              } else {
                this.$message.error('账号或密码错误！')
              }
            })
          } else {
            this.$message.error('请完善信息！')
            return false
          }
        })
      }
    },
    created() {
      if (this.$store.getters.isLogin) {
        // 用户若已登录，自动跳转到首页
        let username = this.$store.getters.username
        this.$message({
          message: username + ' 您已登录！已跳转到首页',
          center: true,
          type: 'success'
        })
        setTimeout(() => this.$router.replace({ name: 'Home' }), 1500)
      }
      // this.$nextTick(() => {
      //   let element = document.getElementById('loginBackground')
      //   new CanvasNest(element, config)
      // })
    }
  }
  </script>
  <style lang="stylus" scoped>
   .loginWrapper
    height 550px !important
    min-height 550px !important
    padding-top 50px
    .formWrapper
      width 375px
      margin 0 auto
      text-align center
      .loginTitle
        margin-bottom 10px
        font-weight 300
        font-size 30px
        color #000
      .loginSystem
        font-weight 300
        color #999
      .demo-ruleForm
        width 100%
        margin-top 20px
        >>> .el-form-item__content
          margin-left 0 !important
        &>>> .el-input__inner
          font-size 16px
        .forgetPassword
          text-align right
          margin -22px 0 0 0
        .loginButtonWrapper
          .loginButton
            width 100%
          &>>> .el-button
            padding 10px 90px
            font-size 16px
      .tip
        width 70%
        margin-left 86px 
  </style>
  